<template>
  <div class="more">
    <el-select
      class="more-select"
      style="width: 97%"
      v-model="value"
      popper-class="more-list"
      @change="change"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div class="more-Title">
      <div class="titlecolor"></div>
      <div class="mt">
        <h1 class="moretitle">{{ title1 }}</h1>
      </div>
    </div>
    <div
      v-if="article == 0"
      class="infinite-list-wrapper"
      style="overflow: auto"
    >
      <ul class="list">
        <template v-if="more === 1">
          <li
            v-for="{ time, title, id } in news"
            @click="article1(id)"
            class="list-item"
            :key="time.id"
          >
            <p class="list-item-title">{{ title }}</p>
            <i class="arrow1 el-icon-arrow-right"></i>
            <span class="list-item-time">{{ time }}</span>
          </li>
          <p class="loading" v-if="data" @click="update()">更多详情</p>
          <p class="loading" v-else>没有更多了</p>
        </template>
        <template v-else-if="more === 2">
          <li
            v-for="{ time, title, id } in notice"
            @click="article2(id)"
            class="list-item"
            :key="id"
          >
            <p class="list-item-title">{{ title }}</p>
            <i class="arrow1 el-icon-arrow-right"></i>
            <span class="list-item-time">{{ time }}</span>
          </li>
          <p class="loading" v-if="data" @click="update()">更多详情</p>
          <p class="loading" v-else>没有更多了</p>
        </template>
        <template v-else-if="more === 3">
          <li
            v-for="{ time, title, id } in dynamics"
            @click="article3(id)"
            class="list-item"
            :key="id"
          >
            <p class="list-item-title">{{ title }}</p>
            <i class="arrow1 el-icon-arrow-right"></i>
            <span class="list-item-time">{{ time }}</span>
          </li>
          <p class="loading" v-if="data" @click="update()">更多详情</p>
          <p class="loading" v-else>没有更多了</p>
        </template>
        <template v-else-if="more === 4">
          <li
            v-for="{ time, title, id, link } in media"
            @click="article4(id, link)"
            class="list-item"
            :key="id"
          >
            <p class="list-item-title">{{ title }}</p>
            <i class="arrow1 el-icon-arrow-right"></i>
            <span class="list-item-time">{{ time }}</span>
          </li>
          <p class="loading" v-if="data" @click="update()">更多详情</p>
          <p class="loading" v-else>没有更多了</p>
        </template>
        <template v-else-if="more === 5">
          <li
            v-for="{ time, title, id } in industry"
            @click="article5(id)"
            class="list-item"
            :key="id"
          >
            <p class="list-item-title">{{ title }}</p>
            <i class="arrow1 el-icon-arrow-right"></i>
            <span class="list-item-time">{{ time }}</span>
          </li>
          <p class="loading" v-if="data" @click="update()">更多详情</p>
          <p class="loading" v-else>没有更多了</p>
        </template>
        <template v-else-if="more === 6">
          <li
            v-for="{ time, title, id } in newspaper"
            class="list-item"
            :key="id"
          >
            <p class="list-item-title">{{ title }}</p>
            <i class="arrow1 el-icon-arrow-right"></i>
            <span class="list-item-time">{{ time }}</span>
          </li>
          <p class="loading" v-if="data" @click="update()">更多详情</p>
          <p class="loading" v-else>没有更多了</p>
        </template>
        <template v-else>
          <li class="list-item">请求错误</li>
        </template>
      </ul>
    </div>
    <!-- 首页学院新闻文章 -->
    <template v-else-if="article == 1">
      <NewsArticle />
    </template>
    <!-- 首页通知公告文章 -->
    <template v-else-if="article == 2">
      <NoticeArticle />
    </template>
    <!-- 首页部门动态文章 -->
    <template v-else-if="article == 3">
      <DynamicsAticle />
    </template>
    <!-- 首页行业动态文章 -->
    <template v-else-if="article == 4">
      <IndustryArticle />
    </template>
    <template v-else>
      <h1>出错了</h1>
    </template>
  </div>
</template>
<script>
// 引入封装接口
import {
  morenews,
  morenotices,
  moredynamics,
  moremedia,
  moreindustry,
  morenewspaper,
} from "@/api";
// 引入组件
import NewsArticle from "@/pages/Article/NewsArticle";
import NoticeArticle from "@/pages/Article/NoticeArticle";
import IndustryArticle from "@/pages/Article/IndustryArticle";
import DynamicsAticle from "@/pages/Article/DynamicsArticle";
// 引入简单封装请求模块
import Request from "@/api/request";
import Qs from "qs";
export default {
  name: "MoreText",
  components: {
    NewsArticle,
    NoticeArticle,
    IndustryArticle,
    DynamicsAticle,
  },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "学院新闻",
        },
        {
          value: "2",
          label: "通知公告",
        },
        {
          value: "3",
          label: "部门动态",
        },
        {
          value: "4",
          label: "媒体水院",
        },
        {
          value: "5",
          label: "行业动态",
        },
        {
          value: "6",
          label: "电子院报",
        },
      ],
      news: [],
      notice: [],
      dynamics: [],
      media: [],
      industry: [],
      newspaper: [],
      value: this.$route.query.key,
      title1: this.$route.query.key,
      id: this.$route.query.id,
      more: this.$route.query.more * 1,
      article: this.$route.query.article,
      param: 1,
      newspage: 1,
      noticepage: 1,
      dynamicspage: 1,
      mediapage: 1,
      industrypage: 1,
      newspaperpage: 1,
      data: true,
      morenews: [
        "/xq/news",
        "/xq/notice",
        "/xq/departmentdynamics",
        "/xq/mediasy",
        "/xq/industrydynamics",
        "/xq/electronicacademynewspaper",
      ],
      apinum: this.$route.query.apinum * 1,
    };
  },
  //组件挂载时向APP传递事件名称和值
  mounted() {
    this.$emit("textdestroy1", false);
  },
  //销毁组件后向APP传递事件名称和值
  beforeDestroy() {
    this.$emit("textdestroy", true);
  },
  // 监听路由值变化
  watch: {
    $route(to, from) {
      this.article = to.query.article;
    },
  },
  //组件创建时发送API请求
  created() {
    //发送学院新闻请求并返回第一页数据传递数组
    morenews().then((res) => {
      const morenews = res.data;
      this.news = morenews;
    });
    //发送公告通知请求并返回第一页数据传递数组
    morenotices().then((res) => {
      const morenotices = res.data;
      this.notice = morenotices;
    });
    //发送部门动态请求并返回第一页数据传递数组
    moredynamics().then((res) => {
      const moredynamics = res.data;
      this.dynamics = moredynamics;
    });
    //发送媒体水院请求并返回第一页数据传递数组
    moremedia().then((res) => {
      const moremedia = res.data;
      this.media = moremedia;
    });
    //发送行业动态请求并返回第一页数据传递数组
    moreindustry().then((res) => {
      const moreindustry = res.data;
      this.industry = moreindustry;
    });
    //发送电子院报请求并返回第一页数据传递数组
    morenewspaper().then((res) => {
      const morenewspaper = res.data;
      this.newspaper = morenewspaper;
    });
  },
  methods: {
    // 学院新闻文章点击
    article1(id) {
      // this.$nextTick(
      this.$router.push({
        query: { key: "学院新闻", article: 1, id: id },
      });
      // );
    },
    // 通知公告文章点击
    article2(id) {
      this.$router.push({
        query: { key: "通知公告", article: 2, id: id },
      });
    },
    // 部门动态文章点击
    article3(id) {
      this.$router.push({
        query: { key: "部门动态", article: 3, id: id },
      });
    },
    // 媒体水院文章点击
    article4(id, link) {
      window.location.href = link;
    },
    // 行业动态文章点击
    article5(id) {
      this.$router.push({
        query: { key: "行业动态", article: 4, id: id },
      });
    },
    //加载更多数据
    update() {
      // 页码值自增
      ++this.param;
      // 发送请求
      Request({
        // 根据栏目发送请求
        url: this.morenews[this.apinum],
        // post请求
        method: "post",
        // 请求页码
        data: Qs.stringify({ page: this.param }),
      }).then((res) => {
        // 当返回值不为空且栏目是学院新闻时
        if (res.data != "" && this.apinum == 0) {
          // 拼接原数组和返回数组
          this.news = this.news.concat(res.data);
          // 缓存当前请求页码
          this.newspage = this.param;
          // 当返回值不为空且栏目是通知公告时
        } else if (res.data != "" && this.apinum == 1) {
          // 拼接原数组和返回数组
          this.notice = this.notice.concat(res.data);
          // 缓存当前请求页码
          this.noticepage = this.param;
          // 当返回值不为空且栏目是部门动态时
        } else if (res.data != "" && this.apinum == 2) {
          // 拼接原数组和返回数组
          this.dynamics = this.dynamics.concat(res.data);
          // 缓存当前请求页码
          this.dynamicspage = this.param;
          // 当返回值不为空且栏目是媒体水院时
        } else if (res.data != "" && this.apinum == 3) {
          // 拼接原数组和返回数组
          this.media = this.media.concat(res.data);
          // 缓存当前请求页码
          this.mediapage = this.param;
          // 当返回值不为空且栏目是行业动态时
        } else if (res.data != "" && this.apinum == 4) {
          // 拼接原数组和返回数组
          this.industry = this.industry.concat(res.data);
          // 缓存当前请求页码
          this.industrypage = this.param;
          // 当返回值不为空且栏目是电子院报时
        } else if (res.data != "" && this.apinum == 5) {
          // 拼接原数组和返回数组
          this.newspaper = this.newspaper.concat(res.data);
          // 缓存当前请求页码
          this.newspaperpage = this.param;
        } else {
          //返回值为空时显示没有更多了
          this.data = false;
        }
        console.log(res.data, this.apinum, this.notice);
      });
    },
    //获取选框数据更改title1值
    change(value) {
      let obj = {};
      obj = this.options.find((item) => {
        return item.value === value;
      });
      this.value = obj.label;
      this.title1 = this.value;
      //修改路由query值
      this.$router.replace({
        query: { key: this.title1, more: obj.value, article: 0 },
      });
      //下拉框更改query值时更改数据
      if (this.$route.query.key == "学院新闻") {
        // 显示学院新闻文章列表
        this.more = 1;
        // 加载更多数据请求第一个接口
        this.apinum = 0;
        // 请求页码和缓存当前栏目页码一致
        this.param = this.newspage;
        this.data = true;
      } else if (this.$route.query.key == "通知公告") {
        // 显示通知公告文章列表
        this.more = 2;
        // 加载更多数据请求第二个接口
        this.apinum = 1;
        // 请求页码和缓存当前栏目页码一致
        this.param = this.noticepage;
        this.data = true;
      } else if (this.$route.query.key == "部门动态") {
        // 显示部门动态文章列表
        this.more = 3;
        // 加载更多数据请求第三个接口
        this.apinum = 2;
        // 请求页码和缓存当前栏目页码一致
        this.param = this.dynamicspage;
        this.data = true;
      } else if (this.$route.query.key == "媒体水院") {
        // 显示媒体水院文章列表
        this.more = 4;
        // 加载更多数据请求第四个接口
        this.apinum = 3;
        // 请求页码和缓存当前栏目页码一致
        this.param = this.mediapage;
        this.data = true;
      } else if (this.$route.query.key == "行业动态") {
        // 显示行业动态文章列表
        this.more = 5;
        // 加载更多数据请求第五个接口
        this.apinum = 4;
        // 请求页码和缓存当前栏目页码一致
        this.param = this.industrypage;
        this.data = true;
      } else if (this.$route.query.key == "电子院报") {
        // 显示电子院报文章列表
        this.more = 6;
        // 加载更多数据请求第六个接口
        this.apinum = 5;
        // 请求页码和缓存当前栏目页码一致
        this.param = this.newspaperpage;
        this.data = true;
      } else {
        console.error("出错了");
      }
    },
  },
};
</script>
<style>
/* 更多详情 */
.more {
  background: white;
  padding: 0.2rem;
}
.infinite-list-wrapper {
  height: auto;
}
/* 标题栏 */
.more-Title {
  width: 96%;
  border-bottom: 1px solid #084fb0;
  margin: 0.2rem 0 0.72rem 0.2rem;
}
/* 标题前面的小点 */
.titlecolor {
  background: #084fb0;
  width: 0.12rem;
  height: 0.52rem;
  display: inline-block;
  margin-left: 0.2rem;
}
/* 标题容器 */
.mt {
  display: inline-block;
}
/* 标题 */
.moretitle {
  font-size: 0.8rem;
  padding: 0.2rem;
  color: #084fb0;
  font-weight: normal;
}
.more-select .el-input__inner {
  text-align: center;
  background: #084fb0;
  color: white;
  height: 1.5rem;
  font-size: 0.72rem;
}
.more-list {
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
  min-width: 96% !important;
}
.el-popper[x-placement^="bottom"] {
  margin: 0;
}
.more-list .el-select-dropdown__item {
  color: white;
  border-bottom: 1px solid #868686;
  font-size: 0.6rem !important;
  height: auto !important;
  line-height: 1.5rem !important;
}
.el-select-dropdown__wrap {
  width: 100%;
  height: 100%;
}
.el-scrollbar {
  /* height: 9.68rem; */
  height: auto;
}
.more-list .el-select-dropdown__item:last-child {
  border-bottom: 0;
}
.more-list .el-select-dropdown__item.hover {
  background-color: rgba(0, 0, 0, 0.75);
}
.list-item {
  line-height: 1rem;
  font-size: 0.56rem;
  padding-left: 0.4rem;
  padding-bottom: 0.36rem;
  border-bottom: 0.04rem dashed #eeeeee;
  margin-bottom: 0.72rem;
}
.list-item .list-item-title {
  width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item .list-item-time {
  font-size: 0.4rem;
  color: #c3c3c3;
}
/* icon图标样式 */
.arrow1 {
  font-size: 0.8rem;
  color: #868686;
  line-height: 0.5;
  position: relative;
  left: 93%;
  top: -0.8rem;
}
/* 加载更多 */
.loading {
  text-align: center;
  font-size: 0.8rem;
  padding-bottom: 0.8rem;
}
</style>
